SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program, like Inkscape.
<br>
but create svg by data programs should use D3 script<br> 
<svg width="1000" height="800" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 h 100 v 100 h 50 v 50 l -100 0" fill="transparent" stroke="red"/>

  <!-- Points changed to circle-->
  <circle cx="300" cy="300" r="100" fill="transparent"/>

<path d="M200 100 C 200 100, 400 200, 400 100" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 150" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 200" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 250" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 300" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 350" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 400" stroke="black" fill="transparent"/>
<path d="M200 100 C 200 100, 400 200, 400 450 S 200 100, 400 500 S 200 100, 400 600" stroke="black" fill="transparent"/>

<path d="M200 100 Q 400 1000 600 100 q 400 400 -0 -100 q 400 400 -100 100 q 400 400 -50 100 " stroke="black" fill="transparent"/>
<image xlink:href="http://newsstatic.rthk.hk/frontend_images/images/st_tyneo/RTHK-logo.png" x="200" y="300" height="150px" width="450px"/>
</svg>
<svg width="240px" height="240px" viewBox="0 0 24 24"><g stroke="#666" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></polyline></path></g></svg>